<template>
	<div class="app-container">
		<div class="filter-container">
			<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addColumn">
				添加栏目
			</el-button>
			<el-dialog :title="thisType=='add'?'添加栏目':'编辑栏目'" :visible.sync="dialogFormVisible" :fullscreen="fullscreen">
				<el-form ref="dataForm" :model="form" label-position="right">
					<el-form-item label="栏目标题" :label-width="formLabelWidth">
						<el-input v-model="form.title" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="图标地址" :label-width="formLabelWidth">
						<el-input v-model.number="form.imgURL" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="栏目权重" :label-width="formLabelWidth">
						<el-input type="number" v-model.number="form.weight" autocomplete="off" width="20"></el-input>
					</el-form-item>

					<el-form-item label="B站合集" :label-width="formLabelWidth">
						<el-input v-model="form.aid" placeholder="请输入B站aid" autocomplete="off" ></el-input>
					</el-form-item>

					<el-form-item label="栏目内容" :label-width="formLabelWidth">
						<tinymce ref="editor" v-model="form.content" :height="300" />
					</el-form-item>


				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="clickOK">确 定</el-button>
				</div>
			</el-dialog>


			<el-table border :data="tableData" style="width: 100%">
				<el-table-column prop="title" label="栏目标题">
				</el-table-column>
				<el-table-column prop="weight" label="栏目权重" width="180">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="editColumn(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteColumn(scope.row)">删除</el-button>

						<BiliBiliCompilations v-if="scope.row.aid" v-bind:column="scope.row" ></BiliBiliCompilations>
					</template>
				</el-table-column>
				

			</el-table>
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
			 :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import Tinymce from '@/components/Tinymce'
	import BiliBiliCompilations from './BiliBiliCompilations'
	import {
		createColumn,
		getColumnList,
		getColumnListCount,
		getOneColumn,
		updateColumn
	} from '@/api/column'
	import { getFromBilibili} from '@/api/article';
	export default {
		components: {
			Tinymce,
			BiliBiliCompilations
		},
		data() {
			return {
				thisType: "add",
				dialogFormVisible: false,
				formLabelWidth: "120px",
				fullscreen: true,
				form: {
					title: "",
					weight: "",
					content: "",
					imgURL: "",
						aid: ""

				},
				total: 0,
				pageSize: 10,
				pageCount: 0,
				currentPage: 1,
				tableData: []
			}
		},
		created() {
			this.initData()
		},
		methods: {
			initData() {
				this.getListCount()
			},
			resetTemp() {
				this.form = {
					title: "",
					weight: "",
					content: "",
					imgURL: "",
						aid: ""

				}
				console.log(this.$refs.editor)
				this.$refs.editor.setContent("")
			},
			getListCount() {
				getColumnListCount({
					where: {
						state: 0
					}
				}).then(response => {
					console.log(response)
					this.total = response.count;
					this.pageCount = Math.ceil(this.total / this.pageSize);
					this.getList(this.currentPage, this.pageSize)
				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});
				})
			},
			getList(currentPage, pageSize) {
				getColumnList({
					filter: {
						where: {
							state: 0
						},
						fields: {
							content: false,
							id: true,
							title: true,
							weight: true,
							aid:true,
							imgURL: false
						},
						order: 'weight DESC',
						limit: pageSize,
						skip: (currentPage - 1) * pageSize
					}
				}).then(response => {
					console.log(response)
					this.tableData = response
				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});
				})
			},
			addColumn() {
				this.thisType = "add"
				// this.dialogStatus = 'create'
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.resetTemp()
					this.$refs['dataForm'].clearValidate()
				})
			},
			editColumn(Column) {
				this.thisType = "edit"
				getOneColumn(Column.id, {}).then(response => {
					console.log(response)
					this.form = response
					
					this.dialogFormVisible = true
					this.$nextTick(() => {
						this.$refs.editor.setContent(response.content)
					})
				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});
				})
			},
			deleteColumn(Column) {
				this.$confirm('将要删除该栏目, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var _Column = Column
					_Column.state = 1
					updateColumn(_Column).then(response => {
						console.log(response)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.initData()

					}).catch(error => {
						this.$message({
							message: error,
							type: 'error'
						});

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			clickOK() {
				if (this.thisType == "add") {
					this.postColumn()
				} else if (this.thisType == "edit") {
					this.updateColumn()
				}
			},
			updateColumn() {
				console.log(this.form)
				updateColumn(this.form).then(response => {
					console.log(response)
					this.dialogFormVisible = false
					this.$message({
						message: '编辑栏目成功',
						type: 'success'
					});
					this.initData()

				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});

				})
				console.log(this.form)
				// 
			},
			postColumn() {
				createColumn(this.form).then(response => {
					console.log(response)
					this.dialogFormVisible = false
					this.$message({
						message: '添加栏目成功',
						type: 'success'
					});
					this.initData()

				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});

				})
				console.log(this.form)
				// 
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getList(this.currentPage, this.pageSize)
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>
